<template>
    <div class="share">
        <el-card class="box-card" shadow="never">
            <div slot="header" class="clearfix">
                <span>全部分享文件</span>
            </div>
            <div>
                <el-table :data="fileList" style="width: 100%" @cell-mouse-enter="handleRowMouseEnter"
                    @cell-mouse-leave="handleRowMouseLeave" v-loading="isLoading">
                    <el-table-column type="selection" width="55">
                    </el-table-column>
                    <el-table-column label="文件名">
                        <template slot-scope="scope">
                            <div class="filename">
                                <MyFileImg :filename="scope.row.fileType" :folder="scope.row.folderType" size="32">
                                </MyFileImg>
                                <div>
                                    <el-link :underline="false" class="ellipsis">{{ scope.row.filename }}</el-link>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column width="100">
                        <template slot-scope="scope">
                            <div v-if="scope.row.show" class="table-more">
                                <div class="table-more-item" v-show="scope.row.status == 1">
                                    <el-tooltip class="item" effect="dark" content="复制链接" placement="top">
                                        <i class="el-icon-link" @click="copy(scope.row)"></i>
                                    </el-tooltip>
                                </div>
                                <div class="table-more-item" v-show="scope.row.status == 1">
                                    <el-tooltip class="item" effect="dark" content="取消分享" placement="top">
                                        <i class="el-icon-circle-close" @click="cancel(scope.row)"></i>
                                    </el-tooltip>
                                </div>
                                <div class="table-more-item" v-show="scope.row.status == 2">
                                    <el-tooltip class="item" effect="dark" content="删除记录" placement="top">
                                        <i class="el-icon-circle-close" @click="del(scope.row)"></i>
                                    </el-tooltip>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="createTime" label="分享时间" width="200">
                    </el-table-column>
                    <el-table-column prop="status" label="状态" width="150">
                        <template slot-scope="scope">
                            <el-tag type="success" v-show="scope.row.status == 1">正常</el-tag>
                            <el-tag type="danger" v-show="scope.row.status == 2">已失效</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="viewsNum" label="浏览次数" width="150">
                    </el-table-column>
                </el-table>
            </div>
        </el-card>
    </div>
</template>

<script>
import MyFileImg from "@/components/my-file-img"
export default {
    name: "share",
    components: {
        MyFileImg
    },
    mounted() {
        this.getMyShareFile()
    },
    data() {
        return {
            pageSize: 10,
            currPage: 1,
            totalPage: 1,
            isLoading: false,
            // 文件列表
            fileList: [],

        }
    },
    methods: {
        handleRowMouseEnter(row) {
            // 在鼠标进入行时，隐藏该行的信息列
            row.show = true;
        },
        handleRowMouseLeave(row) {
            // 在鼠标离开行时，显示该行的信息列
            row.show = false;
        },
        async getMyShareFile() {
            this.isLoading = true
            var path = this.$route.query.path;
            let res = await this.$store.dispatch('getMyShareFile', {
                pId: path == null ? 0 : path.substring(path.lastIndexOf("/") + 1, path.length),
                limit: this.pageSize,
                page: this.currPage,
            })
            this.isLoading = false
            if (!res.success) {
                this.$global.resError(res)
            }
            else {
                res.data.list.forEach(item => {
                    item.show = false;
                });
                this.fileList = this.fileList.concat(res.data.list)
                this.totalPage = res.data.totalPage
                this.currPage++;
            }
        },
        copy(item) {
            var input = document.createElement("input"); // 创建input对象
            input.value = item.url + "?code=" + item.code; // 设置复制内容
            document.body.appendChild(input); // 添加临时实例
            input.select(); // 选择实例内容
            document.execCommand("Copy"); // 执行复制
            document.body.removeChild(input); // 删除临时实例
            this.$message.success("复制成功");
        },
        async cancel(item) {
            let res = await this.$store.dispatch("cancelShare", {
                id: item.id,
                filename: item.filename,
                status: 3
            });
            if (res.success) {
                this.$message.success(res.message)
                this.clearFileList()
                this.getMyShareFile()
            }
            else this.$global.resError(res)
        },
        clearFileList() {
            // 当不是第一页的时候设置标志，防止二次刷新
            // if (this.currPage > 1) this.flag = true;
            this.fileList = []
            this.currPage = 1
        },
        // 删除分享文件记录
        async del(item) {
            let res = await this.$store.dispatch('cancelShare', {
                id: item.id,
                filenme: item.filename,
                status: 3
            })
            if (res.success) {
                this.$message.success(res.message)
                this.clearFileList()
                this.getMyShareFile()
            }
            else this.$global.resError(res)
        }
    },


}
</script>

<style scoped>
.table-more {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.table-more-item {
    cursor: pointer;
    font-size: 16px;
    color: #409EFF;
}

.filename {
    display: flex;
    align-items: center;
}

.ellipsis {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
}
</style>